import React, { PureComponent } from 'react';
import {connect} from 'dva'
import {Icon, Upload, Button, Modal} from 'antd'
import path from 'path';
import styles from './index.less'
const Dragger = Upload.Dragger;

import { QINIU_DOMAIN, QINIU_UPLOAD_DOMAIN, TASK_APPROVE_STATUS, SOURCE, CHANNELS_FOR_CASCADER, TASK_TYPES } from '../../../constants';

@connect(state => ({
  qiniucloud: state.qiniucloud,
}))

export default class VideoUpload extends PureComponent {
  state = {
    visibleMainVideo: false,
  }
  makeUploadData = (file) => {
    const { qiniucloud } = this.props;
    const extname = path.extname(file.name);
    return {
      token: qiniucloud.uptoken,
      key: `${file.uid}${extname}`,
    };
  }
  beforeUpload = (file) =>
    new Promise(function(resolve, reject) {
      const isLt100M = file.size / 1024 / 1024 <= 100;
      if (!isLt100M) {
        message.error('上传文件最大100M');
        reject(isLt100M);
      }
      resolve(isLt100M);
    });
  onUploadChanhe = (data) => {
    if(data.file.response) {
      let {file, fileList} = data
      if(file.response) {
        let temp = []
        fileList.forEach(item => {
          temp.push(`${QINIU_DOMAIN}/${item.response.key}`)
        })
        this.props.onChange(temp)
      }
    }
  }
  delectVideo = () => {
    this.props.onChange([])
  }
  render() {
    const {lable, tips, onChange}= this.props
    return (
      <div>
        {this.props.value.length === 0
          ? <div className={styles['video-box']}>
              <Dragger
                name="file" accept="video/*"
                action={QINIU_UPLOAD_DOMAIN}
                listType={this.state.listType}
                data={this.makeUploadData}
                beforeUpload={this.beforeUpload}
                onChange={this.onUploadChanhe}
              >
                <div style={{padding: 30}}>
                  <Icon type="plus" />
                  <div className={styles['text']}>上传视频</div>
                </div>
              </Dragger>
            </div>
          : this.props.value.map(item =>
            <div className={styles['video']} key={item}>
              <div className={styles['cover-img-video']} >
                <div className={styles['img-warp']}>
                  <span className={styles['link']} onClick={() => {this.setState({visibleMainVideo: true})}}></span>
                </div>
                <div className={styles['operation']}>
                  <div className={styles['replace']} >
                    <Dragger
                      name="file" accept="video/*"
                      action={QINIU_UPLOAD_DOMAIN}
                      data={this.makeUploadData}
                      beforeUpload={this.beforeUpload}
                      onChange={this.onUploadChanhe}
                    >
                      <Icon type="edit" />
                    </Dragger>
                  </div>
                  <div className={styles['delete']}>
                    <Icon type="delete" onClick={this.delectVideo}/>
                  </div>
                </div>
              </div>
            </div>
          )
        }
        <div style={{marginTop: 20}} >支持视频文件格式：mp4、mov、flv、f4v 大小：文件最大1000MB，不支持断点续传 时长：视频时长为3分钟</div>


        <Modal
          title="预览"
          width={680}
          visible={this.state.visibleMainVideo}
          onCancel={() => {this.setState({visibleMainVideo: false})}}
          bodyStyle={{ paddingTop: '10px', paddingBottom: '50px' }}
          footer={[]}
        >
          {
            this.props.value.map(item =>
              <div className={styles['video']}
                style={{height: 400, width: 600, position: 'relative', boxSizing: 'border-box',
                  margin: 10}}
                key={item}
              >
                视频下载地址： <a href={item} target="_blank">{item}</a>
                <div style={{color: 'red'}}>当前只支持mp4格式视频在线播放,其他格式暂不支持在线播放。
                </div>
              <video
                height="400" width="600"
                src={item} controls="controls" preload="true"
              >
                当前浏览器不支持 HTML5 video
              </video>
            </div>
            )
          }
        </Modal>
      </div>
    )
  }
}

const EmptyVideo = props =>
<div className={styles['empty-wrap']}
  style={{
    height: props.height || 155,
    width: props.width || 248,
    marginRight: '10px',
    marginBottom: '10px',
  }}
>
  <div className={styles['add']}>
    <Icon type="plus" />
    <div className={styles['text']}>
      {props.label}
    </div>
  </div>
</div>
